@extends('public.main')
@section('title')
    {{ strip_tags($picture->title) }}
@endsection
@section('css')
    <meta name="keywords" content="{{ $picture->keywords }}"/>
    <meta name="description" content="{{ $picture->description }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('/static/css/detail.css') }}">
@endsection

@section('content')
<div class="col-sm-12 col-xs-12">
    <div class="col-sm-12 col-xs-12" style="margin:0px;padding:0px;">
        <div class="col-sm-12 col-xs-12 content_left" style="margin:0px;padding:0px;">
            <div class="col-sm-12 col-xs-12 item_article">
                <div class="col-sm-12 col-xs-12" style="margin:0;padding:0;margin-top:10px ">
                    {{--<div class="avatar">
                        <img src="{{ asset('/static/img/32.png') }}"/>
                    </div>
                    <div class="user_name">
                        <a href="#" style="color:#9b8878;" id="username">大吴和毛毛</a>
                    </div>--}}
                    <h3>
                        {!! $picture->title !!}
                    </h3>
                </div>
                <div class="col-sm-12 col-xs-12 item_content">
                    @if( $picture->type==0 )
                        <img src="{{ $picture->imgurl }}" class="col-sm-12 col-xs-12" style="max-width: 100%;"/>
                    @elseif( $picture->type==1 )
                        <img src="{{ asset($picture->imgurl) }}" class="col-sm-12 col-xs-12" style="max-width: 100%;"/>
                    @endif
                </div>
                <div id="article_id" style="display:none;">{{ $picture->id }}</div>
                @if(Session::get('user')!=null)
                    <div id="user_id" style="display:none;">{{ Session::get('user')->id }}</div>
                @endif
                <div class="col-sm-12 col-xs-12 detail_button">
                    @if( $before == null )
                        <a role="button" class="col-sm-3 col-xs-3 btn btn-default disabled" href="/pictureDetail/{{ $before }}.html">上一条</a>
                    @else
                        <a role="button" class="col-sm-3 col-xs-3 btn btn-default" href="/pictureDetail/{{ $before }}.html">上一条</a>
                    @endif

                    @if( $next == null )
                        <a role="button" class="col-sm-6 col-xs-4 col-xs-offset-1 col-sm-offset-1 btn btn-default disabled" style="background:black;color:white;" href="/pictureDetail/{{ $next }}.html">下一条</a>
                    @else
                        <a role="button" class="col-sm-6 col-xs-4 col-xs-offset-1 col-sm-offset-1 btn btn-default" style="background:black;color:white;" href="/pictureDetail/{{ $next }}.html">下一条</a>
                    @endif
                    <button type="button" class="col-sm-3 col-xs-3 col-xs-offset-1 col-sm-offset-1 btn btn-default" style="">收藏</button>
                </div>
                <div class="col-sm-12 col-xs-12 item_praise">
                    <div class="praise_first">
                        {{ $picture->praise }} 好笑
                    </div>
                    <div class="praise_point">
                        ·
                    </div>
                    <div class="praise_second">
                        <a href="#" style="color:#999999" id="comment_num">107 评论</a>
                    </div>
                </div>
                <div class="col-sm-12 col-xs-12 item_img">
                    <div style="float:left;">
                        <a href="#"><img src="{{ asset('/static/img/good.png') }}" style="width:20px;height:20px;"/></a>
                        <a href="#"><img src="{{ asset('/static/img/bad.png') }}" style="width:20px;height:20px;margin-left:20px;"/></a>
                        <a href="#"><img src="{{ asset('/static/img/comments.png') }}" style="width:20px;height:20px;margin-left:20px;"/></a>
                    </div>
                    <div style="float:right;">
                        <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
                        <script>window._bd_share_config={"common":{"bdSnsKey":{"tsina":"4056993719","tqq":"101212621"},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"image":{"viewList":["qzone","tsina","weixin"],"viewText":"分享到：","viewSize":"24"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
                    </div>
                </div>
                <div class="col-sm-12 col-xs-12">
                    <script type="text/javascript">
                        document.write('<a style="display:none!important" id="tanx-a-mm_56967596_36728993_131770358"></a>');
                        tanx_s = document.createElement("script");
                        tanx_s.type = "text/javascript";
                        tanx_s.charset = "gbk";
                        tanx_s.id = "tanx-s-mm_56967596_36728993_131770358";
                        tanx_s.async = true;
                        tanx_s.src = "http://p.tanx.com/ex?i=mm_56967596_36728993_131770358";
                        tanx_h = document.getElementsByTagName("head")[0];
                        if (tanx_h) tanx_h.insertBefore(tanx_s, tanx_h.firstChild);
                    </script>
                </div>
            </div>
        </div>

        {{--进行评论--}}
        @if(Session::get('user')!=null)
            <div class="col-sm-12 col-xs-12" style="margin:0px;padding:0px;margin-top:20px;">
                <div class="col-sm-12 col-xs-12 doComment" style="margin:0px;padding:0px;">
                    <div class="col-sm-12 col-xs-12">
                        <textarea class="form-control" rows="2" style="margin-top:20px;" id="text_area" placeholder="写点什么。。"></textarea>
                    </div>
                    <div class="col-sm-12 col-xs-12" style="padding:0px;margin:0px;margin-top:10px;">
                        <div style="float:left;margin-top:5px;margin-left:10px;">还剩余<span id="remaining_word">200</span>个字符</div>
                        <div style="float:right;margin-right:10px;">
                            <button type="button" class="btn btn-success" onclick="pushComment()">评论</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if(Session::get('user')==null)
            <div class="col-sm-12 col-xs-12" style="margin:0px;padding:0px;margin-top:20px;">
                <div class="col-sm-12 col-xs-12 doComment" style="margin:0px;padding:0px;height:50px;padding-left:10px;">
                    <div class="col-sm-12 col-xs-12" style="padding:0px;margin:0px;margin-top:10px;">
                        <div style="float:left;margin-top:5px;">请<a data-toggle="modal" href="#" data-target="#myModal">登录</a>后再进行评论</div>
                    </div>
                </div>
            </div>
        @endif
        {{--评论--}}
        <div class="col-sm-12 col-xs-12 content_left" style="margin:0px;padding:0px;margin-top:20px;margin-bottom:20px;">
            <div class="col-sm-12 col-xs-12 comment" style="margin:0px;padding:0px;padding-left:10px;">
                <h4>评论</h4>
                @foreach( $picture_comments as $picture_comment )
                    <div>
                        <hr style="width:98%;border:1px solid #e7e5e2;margin:0;"/>
                        <div class="col-sm-12 col-xs-12" style="margin-top:10px;margin-bottom:10px;">
                            <div class="col-sm-2 col-xs-2" style="margin:0px;padding:0px;">
                                <img src="{{ $picture_comment->avatar }}" class="img-circle" style="width:40px;height:40px;"/>
                            </div>
                            <div class="col-sm-10 col-xs-10" style="margin:0px;padding:0px;">
                                <div class="col-sm-12 col-xs-12 comment_name" style="margin:0px;padding:0px;">
                                    {{ $picture_comment->name }}
                                </div>
                                <div class="col-sm-12 col-xs-12" style="margin:0px;padding:0px;">
                                    {{ $picture_comment->content }}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    {{--<div class="col-md-4">
        <div class="col-md-12 content_right">
            <div class="col-md-12">
                <h4>快来扫一扫微信二维码，更多精彩内容等你来发现。</h4>
                <img src="http://7xj8tq.com1.z0.glb.clouddn.com/erweima1.jpg">
            </div>
            <div class="col-md-12">
                <iframe width="100%" height="400" class="share_self" frameborder="0" scrolling="no"
                        src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=400&fansRow=1&ptype=1&speed=0&skin=9&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=5605043482&verifier=f260c920&dpc=1"></iframe>
            </div>
        </div>
    </div>--}}
</div>
@endsection

@section('script')
    <script>
        $("#text_area").on("input propertychange", function() {
            var $this = $(this),
                _val = $this.val(),
                count = "";
            if (_val.length > 150) {
                $this.val(_val.substring(0, 150));
            }
            count = 150-$this.val().length;
            $('#remaining_word').text(count);
        });

        function pushComment(){
            var txt=$('#text_area').val();
            var articleId=$('#article_id').text();
            var userId=$('#user_id').text();
            //alert(txt);
            $.post('/doComment',{"content":txt,"articleId":articleId,"userId":userId,"type":1},function(data){
                alert("评论成功!");
                $("#text_area").val("");
                window.location.reload();
            });
        }
    </script>
@endsection